<template>
  <div class="home">
    <div class="box">
      <div id="main" style="width:750px;height:400px;"></div>
    </div>
  </div>
</template>
   
<script>
import * as echarts from 'echarts'
import {shujuRequest} from '../../../request/api/shuju'
  export default {
    data(){
      return{
        options: {
          title: {
            text: '用户来源'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#E9EEF3'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              boundaryGap: false
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ]
        }
      } 
    },
    mounted(){
      var myChart=echarts.init(document.getElementById("main"))
        shujuRequest().then(res=>{
          let result=res.data
          if(result.meta.status !==200){

          }
          // 把数据整合到options中
          let options = {...this.options,...result.data}
          myChart.setOption(options);
        })
    },
  }
</script>
   
<style scoped>
  .box{
    width: 80vw;
    height: 70vh;
    background-color: white;
    padding: 20px;
  }
</style>